<template>
	<view style="height:100vh">
		<layout>
			<view class="container">
				<!-- Tab 标签 -->
				<a-tabs v-model="tabKey" class="tabs" @change="handleTabChange">
					<a-tab-pane key="approved" tab="已审核">
						<!-- 已审核 Tab 内容 -->
						<view class="card-container">
							<a-spin :spinning="spinning1" style="width:100%" />

							<a-card v-for="(item, index) in approvedData" :key="index" :title="item.companyName"
								:extra="item.contactPerson" :style="cardStyle" class="modern-card">
								<template #title>
									{{ item.companyName }}
									<span class="status-tag status-approved">{{ item.auditStatus }}</span>
								</template>

								<template #extra>
									<span class="contact-badge">👤 {{ item.contactPerson }}</span>
								</template>

								<p>📞 联系方式: {{ item.contactNumber }}</p>
								<p>⏳ 最后更新: 2024-02-20</p>
							</a-card>
						</view>
					</a-tab-pane>
					<a-tab-pane key="pending" tab="申请中">
						<!-- 申请中 Tab 内容 -->
						<view class="card-container">

							<!-- 添加按钮 -->
							<a-button type="primary" icon="add" @click="openDialog">添加</a-button>
							<a-spin :spinning="spinning2" style="width:100%" />

							<!-- 申请中的卡片 -->
							<a-card v-for="(item, index) in pendingData" :key="index" :title="item.companyName"
								:extra="item.contactPerson" :style="cardStyle" class="modern-card">
								<template #title>
									{{ item.companyName }}
									<span class="status-tag status-approved">{{ item.auditStatus }}</span>
								</template>

								<template #extra>
									<span class="contact-badge">👤 {{ item.contactPerson }}</span>
								</template>

								<p>📞 联系方式: {{ item.contactNumber }}</p>
							</a-card>
						</view>
					</a-tab-pane>
				</a-tabs>

				<!-- 添加对话框 -->
				<a-modal v-model:visible="dialogVisible" title="添加公司信息" @ok="addCompany">
					<a-form :form="form">
						<a-form-item label="公司名称" :rules="[{ required: true, message: '请输入公司名称' }]">
							<el-select v-model="form.companyName" placeholder="请输入库区" clearable filterable
								@change="handleWhRegionChange">
								<el-option v-for="item in supplier" :key="item.id" :label="item.dictLabel"
									:value="item.dictLabel" />
							</el-select>

						</a-form-item>
						<a-form-item label="联系人" :rules="[{ required: true, message: '请输入联系人' }]">
							<a-input v-model:value="form.contactPerson" placeholder="请输入联系人" />
						</a-form-item>
						<a-form-item label="联系电话" :rules="[{ required: true, message: '请输入联系电话' }]">
							<a-input v-model:value="form.contactNumber" placeholder="请输入联系电话" />
						</a-form-item>
					</a-form>
				</a-modal>
			</view>
		</layout>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';

	const tabKey = ref('approved');
	const dialogVisible = ref(false);
	import {
		listSupplier,
		getSupplier,
		delSupplier,
		addSupplier,
		updateSupplier,
		exportSupplier,
		submitSupplier
	} from "@/api/purchase/supplier";
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	const spinning1=ref(true);
	const spinning2=ref(true);
	
	const approvedData = ref([]);
	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			console.log(ref)
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}
	async function getList1() {
		try {
			const ref = await listSupplier({
				pageNum: 1,
				pageSize: 200,
				applyStatus: 2
			});
			console.log(ref)
			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				let status = await getDictVaule("apply_status", item.applyStatus);
				let a = {
					companyName: item.name,
					contactPerson: item.contact,
					contactNumber: item.contactTel,
					auditStatus: status,
				};

				d.push(a);
			}
			approvedData.value = d;
			spinning1.value=false;
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}
	getList1();
	const pendingData = ref([]);
	async function getList2() {
		try {
			const ref = await listSupplier({
				pageNum: 1,
				pageSize: 100,
				applyStatus: 1
			});
			console.log(ref)
			let d = []

			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const status = await getDictVaule("apply_status", item.applyStatus)
				console.log(status);
				let a = {
					companyName: item.name,
					contactPerson: item.contact,
					contactNumber: item.contactTel,
					auditStatus: status,
				};

				d.push(a);
			}
			pendingData.value = d;
			spinning2.value=false;

		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}
	getList2();
	const form = ref({
		companyName: '',
		contactPerson: '',
		contactNumber: '',
		auditStatus: '申请中',
	});
	const supplier = ref([]);
	getQueryData("query_supplier").then(ref => {
		console.log(ref);
		supplier.value = ref.data;
	});




	const handleTabChange = (key) => {
		console.log('Tab changed to:', key);
	};

	const openDialog = () => {
		form.value = {
			companyName: '',
			contactPerson: '',
			contactNumber: '',
			auditStatus: '',
		};
		dialogVisible.value = true;
	};

	const addCompany = () => {
		if (!form.value.companyName || !form.value.contactPerson || !form.value.contactNumber) {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'none'
			});
			return;
		}
		let g = {
			applyStatus: "1",
			name: form.value.companyName,
			contact: form.value.contactPerson,
			contactTel: form.value.contactNumber,

		}

		addSupplier(g).then(ref => {
			dialogVisible.value = false;
			getList2();
			form.value = {
				companyName: '',
				contactPerson: '',
				contactNumber: '',
				auditStatus: '',
			};
		});
	};

	// 卡片样式
	const cardStyle = {
		borderRadius: '12px', // 圆角
		boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', // 阴影
		transition: 'transform 0.3s ease, box-shadow 0.3s ease', // 动画效果
	};
</script>

<style scoped>
	/* 基础容器 */
	.container {
		padding: 24px;
		background: #f8fafc;
		min-height: 100vh;
	}

	/* 标签页增强样式 */
	.tabs :deep(.ant-tabs-nav) {
		background: #fff;
		border-radius: 12px;
		padding: 8px 16px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.tabs :deep(.ant-tabs-tab) {
		font-weight: 500;
		color: #64748b !important;
		transition: all 0.3s ease;
	}

	.tabs :deep(.ant-tabs-tab-active) {
		color: #3b82f6 !important;
		transform: translateY(-2px);
	}

	/* 网格卡片容器 */
	.card-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 20px;
		padding: 16px 0;
	}

	/* 现代化卡片设计 */
	.modern-card {
		border: none;
		border-radius: 16px;
		background: linear-gradient(145deg, #ffffff, #f8fafc);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
	}

	.modern-card:hover {
		transform: translateY(-8px) scale(1.02);
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
	}

	/* 卡片头部样式 */
	.modern-card :deep(.ant-card-head) {
		background: rgba(59, 130, 246, 0.05);
		border-bottom: none;
		padding: 16px 24px;
	}

	.modern-card :deep(.ant-card-head-title) {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
		display: flex;
		align-items: center;
	}

	.modern-card :deep(.ant-card-head-title)::before {
		content: '🏢';
		margin-right: 12px;
		font-size: 24px;
	}

	/* 卡片内容排版 */
	.modern-card :deep(.ant-card-body) {
		padding: 24px;
	}

	.modern-card p {
		margin: 12px 0;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #475569;
	}

	.modern-card p::before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #94a3b8;
		margin-right: 12px;
	}

	/* 状态标签设计 */
	.status-tag {
		display: inline-flex;
		align-items: center;
		padding: 6px 16px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.status-approved {
		background: #dbeafe;
		color: #1d4ed8;
	}

	.status-pending {
		background: #ffe4e6;
		color: #be123c;
	}

	/* 添加按钮样式 */
	.add-button {
		position: fixed;
		right: 40px;
		bottom: 40px;
		border-radius: 50%;
		width: 56px;
		height: 56px;
		box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
		transition: all 0.3s ease;
	}

	.add-button:hover {
		transform: scale(1.1) rotate(90deg);
		box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
	}

	/* 模态框优化 */
	.modal-form :deep(.ant-form-item-label) {
		font-weight: 500;
		color: #475569;
	}

	.modal-form :deep(.ant-input) {
		border-radius: 8px;
		padding: 12px 16px;
		transition: all 0.3s ease;
	}

	.modal-form :deep(.ant-input):focus {
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
	}
</style>